<template>
  <section class="player-bg">
    <div class="player-wrapper">

      <section class="wrapper-controller">
        <div
          class="item-t-s item-controller-btn item-prev iconfont icon-ziyuanldpi8"
          @click="$store.commit('audio/PLAY_PREV')"
        />
        <div
          @click="$store.commit('audio/TOOGEL_AUDIO_STATUS')"
          :class="['item-t-s item-controller-btn item-play iconfont', audioStatus?'icon-zanting':'icon-ziyuanldpi11']"
        />
        <div
          class="item-t-s item-controller-btn item-next iconfont icon-ziyuanldpi9"
          @click="$store.commit('audio/PLAY_NEXT')"
        />
      </section>

      <section class="wrapper-middle">
        <el-image
          class="item-audio-cover"
          :src='nowPlay.cover'
          fit="cover"
        />
        <section class="wrapper-audio">
          <div class="item-audio-info">
            <div class="item-t-s audio-name">
              <span
                :class="['span-pc',{active: nowPlay.name.length > 90}]"
                v-html="nowPlay.name"
              />
              <span
                style="display:none"
                :class="['span-mb',{active: nowPlay.name.length > 30}]"
                v-html="nowPlay.name"
              />
            </div>
            <div class="item-t-s audio-artist">
              <span
                :class="['span-pc',{active:nowPlay.name.length + nowPlay.artist.length > 102}]"
                v-html="nowPlay.artist"
              />
              <span
                style="display:none"
                :class="['span-mb',{active:nowPlay.artist.length > 8}]"
                v-html="nowPlay.artist"
              />
            </div>
          </div>
          <div class="progress-wrapper">
            <div
              ref="progress"
              class="item-progress"
            >
              <div
                :style="`width:${dragging?newPosition:activeLength}%`"
                class="item-progress-played"
              />

              <div
                :style="`width:${buffered}%`"
                class="item-progress-loaded"
              />
              <div
                :style="`left:${dragging?newPosition:activeLength}%`"
                class="item-progress-btn"
                @touchstart="onButtonDown"
                @mousedown="onButtonDown"
              />
            </div>
          </div>
        </section>
        <section class="wrapper-timer">
          <div>{{nowPlay.current}}</div>
          <span>/</span>
          <div>{{nowPlay.durationFromat}}</div>
        </section>
      </section>

      <section class="wrapper-controller-other">
        <div :class="['item-t-s item-loop iconfont','icon-ziyuanldpi2']" />
        <div
          :class="['item-t-s item-volume iconfont', comVolume]"
          @click="volumeController = !volumeController"
        >
          <mvSlider
            v-if="volumeController"
            class="volume-controller"
            :value="Math.floor(audioVolume*100)"
            @input="volumeHandler"
          />
        </div>
        <div
          class="item-t-s item-loop iconfont"
          :class="loopModel | loopModelFormat"
          @click="$store.commit('audio/TOOGEL_LOOP_MODEL')"
        />
        <div
          :class="['item-t-s item-list iconfont', 'icon-ziyuanldpi4']"
          @click="$store.commit('audio/TOOGEL_PLAYLIST_STATE')"
        > <span>{{playList.length}}</span></div>
      </section>

    </div>
  </section>
</template>

<script>
import { mapGetters } from 'vuex';
import mvSlider from '@/components/slider/main.vue';

export default {
  filters: {
    loopModelFormat(loopModel) {
      const obj = {
        0: 'icon-danquxunhuan1',
        1: 'icon-ziyuanldpi14',
        2: 'icon-ziyuanldpi10',
      };
      return obj[loopModel];
    },
  },
  components: { mvSlider },
  data() {
    return {
      volumeController: false,
      progessStart: 0,
      progressWidth: 0,
      startX: 0,
      moveX: 0,
      newPosition: 0,
      dragging: false,
      isClick: false,
    };
  },
  computed: {
    ...mapGetters([
      'audio',
      'audioStatus',
      'audioVolume',
      'loopModel',
      'activeLength',
      'buffered',
      'audioListState',
      'playList',
      'nowPlay',
    ]),
    comVolume() {
      const { audioVolume } = this;
      if (audioVolume === 0) {
        return 'icon-ziyuanldpi3';
      }
      return audioVolume < 0.5 ? 'icon-ziyuanldpi12' : 'icon-ziyuanldpi13';
    },
  },
  methods: {
    volumeHandler(data) {
      this.$store.commit('audio/SETTING_VOLUME', data);
    },
    getProgressStyle() {
      this.progressWidth = this.$refs.progress.offsetWidth;
      this.progressStart = this.$refs.progress.getBoundingClientRect().left;
    },
    onButtonDown(event) {
      event.preventDefault();
      this.getProgressStyle();
      this.onDragStart(event);
      window.addEventListener('mousemove', this.onDragging);
      window.addEventListener('touchmove', this.onDragging);
      window.addEventListener('mouseup', this.onDragEnd);
      window.addEventListener('touchend', this.onDragEnd);
      window.addEventListener('contextmenu', this.onDragEnd);
    },
    onDragStart(event) {
      this.dragging = true;
      this.isClick = true;
      if (event.type === 'touchstart') {
        event.clientY = event.touches[0].clientY;
        event.clientX = event.touches[0].clientX;
      }
      this.startX = event.clientX;
    },
    onDragging(event) {
      if (this.dragging) {
        this.isClick = false;
        if (event.type === 'touchmove') {
          event.clientY = event.touches[0].clientY;
          event.clientX = event.touches[0].clientX;
        }
        const diff = (event.clientX - this.progressStart) / this.progressWidth;
        let newPosition = Math.floor(diff * 100);
        if (newPosition < 0) {
          newPosition = 0;
        } else if (newPosition > 100) {
          newPosition = 100;
        }
        this.newPosition = newPosition;
        this.setPosition(this.newPosition);
      }
    },
    onDragEnd() {
      if (this.dragging) {
        /*
         * 防止在 mouseup 后立即触发 click，导致滑块有几率产生一小段位移
         * 不使用 preventDefault 是因为 mouseup 和 click 没有注册在同一个 DOM 上
         */
        setTimeout(() => {
          this.dragging = false;
          if (!this.isClick) {
            this.setPosition(this.newPosition);
            this.$store.commit('audio/SETTING_PROGRESS', this.newPosition);
            this.newPosition = this.activeLength;
          }
        }, 0);
        window.removeEventListener('mousemove', this.onDragging);
        window.removeEventListener('touchmove', this.onDragging);
        window.removeEventListener('mouseup', this.onDragEnd);
        window.removeEventListener('touchend', this.onDragEnd);
        window.removeEventListener('contextmenu', this.onDragEnd);
      }
    },
    setPosition(newPosition) {
      if (newPosition === null || Number.isNaN(newPosition)) return;
      if (newPosition < 0) {
        newPosition = 0;
      } else if (newPosition > 100) {
        newPosition = 100;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.item-volume {
  position: relative;
}
.volume-controller {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 758943649;
}
</style>
<style lang="less" scoped src="./styles/audio-player.less" />
